<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8"/>
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1"
  />
  <title>登录</title>
  <link rel="stylesheet" href="/static/component/pear/css/pear.css"/>
  <link rel="stylesheet" href="/static/admin/css/other/login.css"/>
  <link rel="stylesheet" href="/static/admin/css/variables.css"/>
  <script>
    if (window.self != window.top) {
      top.location.reload();
    }
  </script>
</head>

<body>
<div
  class="login-page"
  style="background-image: url(/static/admin/images/background.svg)"
>
  <div class="layui-row">
    <div class="layui-col-sm6 login-bg layui-hide-xs">
      <img
        class="login-bg-img"
        src="/static/admin/images/banner.png"
        alt=""
      />
    </div>
    <div class="layui-col-sm6 layui-col-xs12 login-form">
      <div class="layui-form">
        <div class="form-center">
          <div class="form-center-box">
            <div class="top-log-title">
              <img
                class="top-log"
                src="https://www.layui-vue.com/assets/logo-png-B_GrttYE.png"
                alt=""
              />
              <span>Pear Admin Django</span>
            </div>
            <div class="top-desc">
              人 类 终 将 毁 灭 - 世 界 属 于 三 体
            </div>
            <div style="margin-top: 30px">
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                  </div>
                  <input
                    type="text"
                    name="mobile"
                    lay-verify="required|mobile"
                    placeholder="账户"
                    autocomplete="off"
                    class="layui-input"
                    value="15543526531"
                    id="validate-mobile"
                  />
                </div>
              </div>
              <div class="layui-form-item">
                <div class="layui-input-wrap">
                  <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                  </div>
                  <input
                    type="password"
                    name="password"
                    value="123456"
                    lay-verify="required|password"
                    placeholder="密码"
                    autocomplete="off"
                    class="layui-input"
                    lay-affix="eye"
                  />
                </div>
              </div>
              <div class="layui-form-item">
                <div class="remember-passsword">
                  <div class="remember-cehcked">
                    <input
                      type="checkbox"
                      name="like1[write]"
                      lay-skin="primary"
                      title="自动登录"
                    />
                  </div>
                </div>
              </div>
              <div class="login-btn">
                <button
                  type="button"
                  lay-submit
                  lay-filter="login-in"
                  class="layui-btn login"
                >
                  登 录
                </button>
              </div>
              <div class="other-login">
                <div class="other-login-methods">其他方式</div>
                <div class="greenText">注册账号</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 资 源 引 入 -->
<script src="/static/component/layui/layui.js"></script>
<script src="/static/component/pear/pear.js"></script>
<script src="/static/dc.js"></script>

<script>
  let token = "{{ csrf_token }}";
  solve_csrf(token)

  layui.use(["form", "button", "popup"], function () {
    let form = layui.form;
    let button = layui.button;
    let popup = layui.popup;
    let $ = layui.$;

    // 登录过期的时候,跳出ifram框架
    // if (top.location != self.location) top.location = self.location;

    // [前端] 自定义验证规则 在submit提交时会自动触发
    form.verify({
      mobile: function (value, elem) {
        console.log(value);
        if (!/^1[3-9]\d{9}$/.test(value)) {
          return "请输入有效的手机号码";
        }
      },
      password: function (value) {
        if (value.length < 6) {
          return "密码至少为6位";
        }
        if (value.length > 12) {
          return "密码不能超过10位";
        }
      },
    });

    // 登 录 提 交
    form.on("submit(login-in)", function (data) {
      /// 验证
      // console.log(data.field);
      // console.log(JSON.stringify(data.field));
      /// 动画
      let btn = button.load({elem: ".login"}); // 先阻塞住
      let url = "/login/"
      let d = data.field
      loginAjaxRequest(btn, popup, url, d)
      return false;
    });
  });
</script>
</body>
</html>
